<template>
    <div class="commentbox">
        <!-- 评论页 -->
        <div v-show="jz">
            <div class="reback" @click="fanhui">‹</div>
            <div class="pltop">评论({{plzs}})</div>
            <div class="plgqm">
                <div class="gqmleft">
                    <img v-lazy="plsrc" alt="">
                </div>
                <div class="gqmright">
                    <div>{{plname}}</div> <div>-</div> <div>{{plpeople}}</div> 
                </div>
            </div>
            <div class="huanhang"></div>
            <!-- 评论区 -->
            <ul class="plul" ref="ul">
                <li class="plbt">热门评论</li>
                <li v-for="item in hotplarr" :key="item.id">
                    <plone v-bind:mysrc="item.src" v-bind:myname="item.name" v-bind:mycontent="item.content" v-bind:myid="item.id" v-bind:myhot="item.hot" v-bind:mynum="item.num" v-bind:myplid="plid"></plone>
                </li>
                <li class="plbt">最新评论</li>
                <li v-for="item in newplarr" :key="item.id">
                    <plone v-bind:mysrc="item.src" v-bind:myname="item.name" v-bind:mycontent="item.content" v-bind:myid="item.id" v-bind:myhot="item.hot" v-bind:mynum="item.num" v-bind:myplid="plid"></plone>
                </li>
                <li class="loading">
                    <loading v-show="jiazai"></loading>
                </li>
            </ul>
        </div>
        <loading v-show="!jz" class="jiazai"></loading>
    </div>
</template>
<script>
import plone from "../small/plone.vue"
import loading from "../small/loading.vue"
export default {
    name:"comment",
    data(){
        return {
            plid:0,
            next:0,
            plzs:0,
            shuzi:0,

            jiazai:true,

            plpeople:'',
            plname:'',
            plsrc:'',
            wc:0,
            jz:false,
            hotplarr:[],
            newplarr:[],
            mysz:0,
        }
    },
    components:{
        plone,
        loading
    },
    created(){
        this.plid = this.$route.query.id
        this.hqxx()
        
        // 创建组件的时候回到最开始的地方
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        // 添加滚动事件
        window.addEventListener('scroll', this.listscroll)
        document.body.addEventListener('scroll', this.listscroll)
    },
    methods:{
        // 获取热门歌曲的信息 beReplied
        gethotdata(){
            axios.get(`https://apis.netstart.cn/music/comment/music?id=${this.plid}`).then(
                res=>{
                    // console.log("111",res)
                    this.plzs = res.data.total
                    let pl = res.data.hotComments
                    for(let i = 0;i<pl.length;i++){
                        if(pl[i].beReplied.length == 0){
                            let obj = {}
                            obj.name = pl[i].user.nickname
                            obj.src = pl[i].user.avatarUrl
                            obj.id = pl[i].commentId
                            obj.content = pl[i].content
                            obj.hot = pl[i].likedCount
                            obj.num = 0
                            this.hotplarr.push(obj)
                        }
                    }
                    // 是热门评论的获取回复数量
                    this.over(1)
                },
                err=>{
                    console.log(err)
                }
            )
        },
        // 获取新的评论数据
        getxin(){
            axios.get(`https://apis.netstart.cn/music/comment/music?id=${this.plid}&offset=${this.next*20}`).then(
                res=>{
                    let pl = res.data.comments
                    for(let i = 0;i<pl.length;i++){
                        if(pl[i].beReplied.length == 0){
                            let obj = {}
                            obj.name = pl[i].user.nickname
                            obj.src = pl[i].user.avatarUrl
                            obj.id = pl[i].commentId
                            obj.content = pl[i].content
                            obj.hot = pl[i].likedCount
                            obj.num = 0
                            this.newplarr.push(obj)
                        }
                    }
                    if(this.plzs == pl.length){
                        // console.log("只有这么多")
                        this.jiazai = false
                        this.jz = true
                    }
                    // 获取最新数据的楼层信息
                    this.over(2)
                },
                err=>{
                    console.log(err)
                }
            )
        },
        // 获取当前歌曲的信息
        hqxx(){
            axios.get(`https://apis.netstart.cn/music/song/detail?ids=${this.plid}`).then(
                res=>{
                    // console.log("gqxq",res)
                    this.plname = res.data.songs[0].al.name
                    this.plsrc = res.data.songs[0].al.picUrl
                    let renarr = res.data.songs[0].ar
                    let plren = ''
                    for(let c = 0 ;c<renarr.length;c++){
                        if(c == 0){
                            plren = renarr[c].name
                        }else{
                            plren += "/"+renarr[c].name
                        }
                    }
                    this.plpeople = plren
                    this.gethotdata()
                    this.getxin()
                },
                err=>{
                    console.log(err)
                }
            )
        },
        // 获取完当前的评论信息后进行获取其楼层信息
        over(num){
            let nowarr = []
            if(num == 1){
                // 是热门评论的回复层数的获取
                nowarr = this.hotplarr
            }else{
                // 是最新评论的回复层数的获取
                nowarr = this.newplarr
            }
            for(let i = 0;i<nowarr.length;i++){
                axios.get(`https://apis.netstart.cn/music/comment/floor?parentCommentId=${nowarr[i].id}&id=${this.plid}&type=0`).then(
                    res=>{
                        if(num == 1){
                            this.hotplarr[i].num = res.data.data.totalCount
                        }else{
                            this.newplarr[i].num = res.data.data.totalCount
                        }
                        // 获取完最后一个数据的时候显示评论页面
                        if(i == nowarr.length - 1){
                            this.shuzi += 1
                            if(this.next == 0 && this.shuzi == 2){
                                this.jz = true
                            }
                        }
                    },
                    err=>{
                        console.log(err)
                    }
                )
            }
        },
        listscroll(){
            if(this.$refs.ul !== undefined){
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                //变量windowHeight是可视区的高度
                let windowHeight = document.documentElement.clientHeight || documentbody.clientHeight;
                if(scrollTop+windowHeight >= 110+this.$refs.ul.scrollHeight-1){
                    clearTimeout(this.timer)
                    this.timer = setTimeout(()=>{
                        this.next += 1
                        this.getxin()
                    },1000)
                }
            }
        },
        fanhui(){
            this.$router.go(-1)
        },
        // getnext(){
        //     // console.log("daodi")
            
        // },
    }
}
</script>
<style lang="less" scoped>
.commentbox{
    // background:#ccc;
}
.reback{
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 2rem;
    color: black;
    background-color: white;
    width: 50px;
    height: 50px;
    line-height: 45px;
    text-align: center;
    z-index: 1000;
}
.jiazai{
    height:500px;
}
.pltop{
    position:fixed;
    top:0px;
    width:100%;
    height:50px;
    text-align:center;
    font-size:20px;
    line-height:50px;
    background:white;
    z-index:50;
}
.plgqm{
    width:90%;
    margin:0 auto;
    display:flex;
    padding-top:55px;
    .gqmleft{
        flex-shrink: 0;
        width:50px;
        height:50px;
        background: black;
        box-sizing:border-box;
        padding:5px;
        border-radius:50%;
        overflow:hidden;
        img{
            width:40px;
            border-radius:50%;
            overflow:hidden;
            margin: 0 auto;
        }
    }
    .gqmright{
        margin-left:10px;
        line-height:50px;
        width:80%;
        display:flex;
        // vertical-align: middle;
        p{
            margin: 0;
            display:inline-block;
            width:40%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        div{
            max-width:40%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex-shrink: 0;
        }
        div:nth-child(2){
            width:10%;
            text-align: center;
        }
        span{
            font-size:14px;
            color:#888;
        }
    }
}
.huanhang{
    margin-top:5px;
    width:100%;
    height:5px;
    background:#eee;
}
.plul{
    width:90%;
    margin:20px auto;
    li{
        margin-bottom:10px;
    }
    .plbt{
        font-size: 20px;
        line-height: 25px;
        margin-top: 15px;
        margin-bottom: 20px;
    }
}
.loading{
    height:50px;
    width:100%;
}
</style>